﻿<template>
    <div class="hidden h100 flex-column">
        <component is="style" />
        <remote-style src="@(Url.Content("~/Content/index/wangeditor/index.css"))"></remote-style>
        <remote-script src="@(Url.Content("~/Content/index/wangeditor/index.js"))"></remote-script>
        <div class="flex-row padding-tb-8">
            <div class="flex-row-fill margin-left-10">
                <el-button type="primary" v-on:click="openEdit(0)" icon="el-icon-plus" plain size="small">新增</el-button>
            </div>
            <el-pagination background v-on:size-change="pagerSizeChange" v-on:current-change="pagerIndexChange"
                           :current-page="query.pageIndex" :page-sizes="[10,30,50,100]" :page-size="query.pageSize"
                           layout="prev, pager, next, total, jumper, sizes" :total="query.rowCount" :small="true"></el-pagination>
        </div>
        <div class="flex-column-fill hidden">
            <vxe-table :data="list" ref="vxeTable" stripe border style="width:100%;" height="100%" size="small" auto-resize :row-config="{isCurrent: true, isHover: true}" :column-config="{minWidth:'60px'}" show-header-overflow show-overflow>
                <vxe-column field="title" title="标题" width="280" align="center">
                    <template #default="scope">
                        <el-link type="primary" v-on:click="toShare(scope.row.id)">{{scope.row.title}}</el-link>
                    </template>
                </vxe-column>
                <vxe-column title="操作" width="220" align="center">
                    <template #default="scope">
                        <el-button type="warning" icon="el-icon-edit" v-on:click="openEdit(1,scope)" size="mini" plain v-if="fn.edit">修改</el-button>
                        <el-button type="danger" icon="el-icon-delete" v-on:click="openEdit(2,scope)" size="mini" plain v-if="fn.edit">删除</el-button>
                    </template>
                </vxe-column>
                <vxe-column>
                </vxe-column>
            </vxe-table>
        </div>
        <el-drawer custom-class="el-drawer-fix" size="80%" :visible.sync="detail.show"
                   :destroy-on-close="true" :close-on-press-escape="false" :wrapper-closable="false">
            <div slot="title">
                {{detail.optType==0?'添加':'修改'}}笔记
            </div>     
            <div id="editor—wrapper" class="flex-column">
                <div id="toolbar-container">
                    @*工具栏*@
                </div>
                <div id="title-container" style="padding: 20px; border-bottom: 1px solid #e8e8e8; background: white;">
                    <el-input placeholder="Page title..." v-model="title">
                    </el-input>
                </div>
                <div id="editor-container" class="flex-column-fill">
                    @*编辑器*@
                </div>
                <div class="text-center padding-10 bg-white">
                    <el-button type="primary" size="small" v-on:click="submit">保存</el-button>
                </div>

            </div>
        </el-drawer>
    </div>
</template>
<script>
    module = (function (hxt) {
        return {
            name: 'wangEditor',
            props: {

            },
            data: function () {
                var _this = this, optor = hxt.store.optor, wangEditor = null;
                return {
                    optor: optor,
                    query: {
                        pageIndex: 1,
                        pageSize: 30,
                        rowCount: 0,
                    },
                    fn: {
                        edit: optor.canDo(30701)
                    },
                    html: '',
                    title: '',
                    list: [],
                    detail: { show: false, optType: 0, html:'',id:0, },
                }
            },
            computed: {

            },
            watch: {

            },
            activated: function () {
            },
            mounted: function () {
                var _this = this;
                _this.loadList();
            },
            methods: {
                loadEditor: function () {
                    var _this = this;
                    _this.wangEditor = window.wangEditor;
                    const editorConfig = {
                        placeholder: 'Type here...',
                        onChange(editor) {
                            const html = editor.getHtml();
                            // 也可以同步到 <textarea>
                            _this.html = html;
                        }
                    }

                    const editor = _this.wangEditor.createEditor({
                        selector: '#editor-container',
                        html: '<p><br></p>',
                        config: editorConfig,
                        html: _this.detail.html,
                        mode: 'default', // or 'simple'
                    });

                    
                    const toolbarConfig = {
                        //modalAppendToBody: true,
                        //insertKeys: {
                        //    index: 32, // 插入的位置，基于当前的 toolbarKeys
                        //    keys: ['menu-key1', 'menu-key2']
                        //}
                    };

                    const toolbar = _this.wangEditor.createToolbar({
                        editor,
                        selector: '#toolbar-container',
                        config: toolbarConfig,
                        mode: 'default', // or 'simple'
                    });
                    return
                    editor.getConfig().MENU_CONF['uploadImage'] = {
                        server: hxt.config.link + 'pc/uploadImage',
                        fieldName: 'file',
                        // 单个文件的最大体积限制，默认为 2M
                        maxFileSize: 100 * 1024 * 1024, // 100M

                        // 最多可上传几个文件，默认为 100
                        maxNumberOfFiles: 1,

                        // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
                        allowedFileTypes: ['image/*'],

                        // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
                        meta: {
                            OSSAccessKeyId: oss.accessKeyId,
                            signature: oss.signature,
                            policy: oss.policy,
                            success_action_status: oss.success_action_status,
                            key: oss.key + '/your-custom-name'
                        },
                        // 自定义增加 http  header
                        headers: {
                            Accept: 'text/x-json'
                        },

                        // 跨域是否传递 cookie ，默认为 false
                        withCredentials: false,

                        // 超时时间，默认为 10 秒
                        timeout: 5 * 1000, // 5 秒
                        onSuccess(file, res) {          // JS 语法
                            console.log(`${file.name} 上传成功`, res)
                        },

                        // 单个文件上传失败
                        onFailed(file, res) {           // JS 语法
                            console.log(`${file.name} 上传失败`, res)
                        },

                        // 上传错误，或者触发 timeout 超时
                        onError(file, err) {               // JS 语法
                            console.log(`${file.name} 上传出错`, err)
                        },
                    };

                },
                loadList: function () {
                    var _this = this;
                    hxt.post({
                        url: hxt.config.link + 'pc/wangEditorList',
                        data: { openId: _this.optor.openId, pageIndex: _this.query.pageIndex, pageSize: _this.query.pageSize },
                        ok: function (res) {
                            if (res.code != 0) return hxt.error('查询失败：' + res.errmsg);
                            _this.query.pageIndex = res.data.pageIndex;
                            _this.query.pageSize = res.data.pageSize;
                            _this.query.rowCount = res.data.rowCount;
                            _this.list = res.data.list;
                        }
                    });
                },
                pagerSizeChange: function (val) {
                    var _this = this;
                    _this.query.pageSize = val;
                    if (Math.ceil(_this.query.rowCount * 1.0000 / val) >= _this.query.pageIndex) _this.loadList();
                },
                pagerIndexChange: function (val) {
                    var _this = this;
                    _this.query.pageIndex = val;
                    _this.loadList();
                },
                openEdit: function (show, d) { //show 0：新增；1：修改；2：删除；
                    var _this = this;
                    _this.detail.optType = show;
                    if (show == 0) {
                        _this.title = '';
                        _this.detail.id = 0;
                        _this.detail.html = '';
                        _this.detail.show = true;
                        _this.$nextTick(function () {
                            _this.loadEditor();
                        });
                        return;
                    };
                    if (show == 1) {
                        hxt.post({
                            url: hxt.config.link + 'pc/wangEditorInfo',
                            data: { id: d.row.id },
                            ok: function (res) {
                                _this.title = res.data.title;
                                _this.detail.id = res.data.id;
                                _this.detail.html = res.data.html;
                                _this.detail.show = true;
                                _this.$nextTick(function () {
                                    _this.loadEditor();
                                });
                            }
                        });
                        
                        return;
                    };
                    if (show == 2) {
                        hxt.confirm("确定删除此章笔记？", function () {
                            hxt.post({
                                url: hxt.config.link + 'pc/wangEditorSave',
                                data: {
                                    optType: 2,
                                    id: d.row.id,
                                    openId: _this.optor.openId
                                },
                                ok: function (res) {
                                    if (res.code != 0) return hxt.error('删除失败：' + res.errmsg);
                                    hxt.success('删除成功');
                                    _this.list.splice(d.rowIndex, 1);
                                }
                            });

                        });
                        return;
                    };
                },
                submit: function (e) {
                    var _this = this;
                    hxt.confirm("确定保存此文档？", function () {
                        hxt.post({
                            url: hxt.config.link + 'pc/wangEditorSave',
                            data: { content: encodeURI(_this.html), optType: _this.detail.optType, openId: _this.optor.openId, title: _this.title, id: _this.detail.id },
                            ok: function (res) {
                                if (res.code != 0) return hxt.error('保存失败：' + res.errmsg);
                                hxt.success('保存成功');
                                _this.loadList();
                                _this.detail.show = false;
                            }
                        });
                    });
                },
                toShare: function (id) {
                    window.open(hxt.config.link +'pc/wangEditorShare?id='+id);
                }
            },
            components: {
                remoteScript: hxt.remoteScript(),
                remoteStyle: hxt.remoteStyle()
            }
        };
    })(window.$jscript.fn);
</script>
<style>
    #title-container .el-input__inner {
        font-size: 30px;
        font-family: '宋体';
        font-weight: bold;
        color: black;
        border: none !important;
        outline: none;
        width: 100%;
    }
</style>